<template>
	<div>
		<el-dialog title="添加管理员" :visible.sync="addVisible" width="30%" :before-close="closeAddManager" @open="opendEnd">
			<el-form :model="manager" ref="addManager" label-width="100px">
        <el-form-item label="用户名" prop="userCode" :rules="[
              { required: true, message: '请输入用户名', trigger: 'blur' },
            ]">
        	<el-input type="text" v-model="manager.userCode" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
				<el-form-item label="持有人" prop="userName">
					<el-input type="text" v-model="manager.userName" placeholder="请输入持有人姓名" clearable></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="userPwd" :rules="[
				     { required: true, message: '请输入密码', trigger: 'blur' },
				   ]">
					<el-input type="password" v-model="manager.userPwd" placeholder="请输入密码" clearable></el-input>
				</el-form-item>
        <el-form-item label="确认密码" prop="toUserPwd" :rules="[
             { required: true, message: '请再次密码', trigger: 'blur' },
           ]">
        	<el-input type="password" v-model="manager.toUserPwd" placeholder="请再次密码" clearable></el-input>
        </el-form-item>

        <el-form-item label="账户状态" prop="status" :rules="[
              { required: true, message: '请选择是否启用', trigger: 'blur' },
            ]">
          <el-switch
            v-model="manager.onstatus" @change="onstatus(manager.onstatus)"
            active-text="启用" inactive-text="禁用">
          </el-switch>
        </el-form-item>
				<el-form-item label="权限" prop="role" :rules="[
				     { required: true, message: '请选择权限', trigger: 'blur' },
				   ]">
					<el-select v-model="manager.role" placeholder="请选择权限" :default-first-option="true">
						<el-option v-for="item in visiters" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAddManager">取 消</el-button>
				<el-button type="primary" @click="addManager('addManager')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "",
		props: ["addVisible"],
		data() {
			return {
				manager: {
          userCode:"",
					userName: "",
          //以下两个变量用于判断两次输入密码是否一致
					userPwd: "",
          toUserPwd:"",
          //role在数据库的默认值为1，所以直接显示内容即可，不需要通过内容判断转值
					role: "",
          //以下两个变量用于判断用户状态
          status:1,
          onstatus:true,
				},
				visiters: [{
					value: 0,
					label: '普通用户'
				}, {
					value: 1,
					label: '管理员'
				}, {
					value: 2,
					label: '超级管理员'
				}],
			}
		},
		methods: {
      //需要等待dialog 打开完毕后 在金数据渲染
      //设置权限下拉框的默认值
      opendEnd(){
      	this.manager.role=0
      },
      //设置是否启用账户
      onstatus(status){
        console.log(status)
        if(status===true){
          this.manager.status=1
        }else if(status===false){
          this.manager.status=0
        }
        // console.log(this.manager.onstatus)
        // console.log(this.manager.status)
      },
      //清除文本框数据，返回相对应文本框的值
      clearData(){
          this.manager={
            userCode:"",
            userName: "",
            //以下两个变量用于判断两次输入密码是否一致
            userPwd: "",
            toUserPwd:"",
            //role在数据库的默认值为1，所以直接显示内容即可，不需要通过内容判断转值
            role: "",
            //以下两个变量用于判断用户状态
            status:1,
            onstatus:true,
          }
      },
      //设置关闭添加页面方法
			closeAddManager() {
        this.clearData()
				this.$parent.addVisible = false
			},
      //执行添加方法
			addManager(params) {
				var self = this
				this.$refs[params].validate((valid) => {
					if (valid) {
						var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
            console.log(self.manager.status)
            // console.log(onlineManager.role)
            /* 权限判断*/
            if(onlineManager.role===2){
              // 检测输入的数据中是否存在空格
              var usercode = this.manager.userCode
              var username = this.manager.userName
              var code1 = this.manager.userPwd;
              var code2 = this.manager.toUserPwd;
              if(usercode.split(" ").length==1){
                if(username.split(" ").length==1){
                  if(code1.split(" ").length==1||code2.split(" ").length==1){
                    /* 密码判断*/
                    if(code1===code2){
                      self.$http({
                        url: "/api/CakeShop/addUser",
                        method: "post",
                        // headers: {
                        // 	token: manager.token
                        // },
                        data: {
                          userCode: self.manager.userCode,
                          userName:self.manager.userName,
                          userPass: self.manager.userPwd,
                          status:self.manager.status,
                          role: self.manager.role,
                        },
                      }).then(function(res) {
                        //判断用户名是否存在
                        if (res.data.code == 10120) {
                          self.$message({
                            message: res.data.info,
                            type: 'error',
                          });
                        }
                        if(res.data.exist===0){
                          if (res.data.addSuccNum>0) {
                            self.$message({
                              message: '恭喜你，添加成功',
                              type: 'success',
                              onClose: function() {
                                //添加完毕后清楚文本框中内容
                                self.clearData()
                                //关闭修改界面
                                self.closeAddManager()
                                //添加完数据返回首页
                                self.$parent.getMemberList(1)
                              }
                            });
                          }
                        }else{
                          self.$message({
                          	duration: 1500,
                          	message: res.data.msg,
                          	type: "error",
                          	onClose: function() {
                          		self.loading = false;
                          	},
                          });
                        }
                      })
                    }else{
                      self.$message({
                      	duration: 1500,
                      	message: "两次输入密码不一致!",
                      	type: "error",
                      	onClose: function() {
                      		self.loading = false;
                      	},
                      });
                    }
                  }else{
                    self.$message({
                    	duration: 1500,
                    	message: "两次输入密码中存在非法字符空格!",
                    	type: "error",
                    	onClose: function() {
                    		self.loading = false;
                    	},
                    });
                  }
                }else{
                  self.$message({
                  	duration: 1500,
                  	message: "用户名中存在非法字符空格!",
                  	type: "error",
                  	onClose: function() {
                  		self.loading = false;
                  	},
                  });
                }
              }else{
                self.$message({
                	duration: 1500,
                	message: "账号中存在非法字符空格!",
                	type: "error",
                	onClose: function() {
                		self.loading = false;
                	},
                });
              }
            }else{
              self.$message({
              	duration: 1500,
              	message: "当前管理员权限不足!",
              	type: "error",
              	onClose: function() {
              		self.loading = false;
                  //添加完毕后清楚文本框中内容
                  self.clearData()
                  //关闭修改界面
                  self.closeAddManager()
              	},
              });
            }
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>
<style>
</style>
